import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { RCommonListComponent, RSendRequestService, RTable, RTableService, R_TABLE_PAGINATOR_A, TABLE_TYPE } from 'common-table';
@Component({
  selector: 'app-catalog',
  templateUrl: './catalog.component.html',
  styleUrls: ['./catalog.component.scss']
})

export class CatalogComponent extends RCommonListComponent implements OnInit {

  public rTable: RTable; // table配置
  public formModule: FormGroup; // 查询列表表单对象

  public useStateList: Array<any>; // 状态下拉（单选）
  public useStateSelected: any;  // 状态选中项
  public audioList: Array<object>; // 音乐列表
  public dictList: Array<any>; // 字典下拉列表值
  public dictSelected: any; // 选中字典值

  constructor(
    private fb: FormBuilder,
    public rTableService: RTableService,
    public rSendRequestService: RSendRequestService) {
    super(rTableService);
    this.formModule = this.fb.group({
      typeName: '',
      type: ''
    });
    this.useStateList = JSON.parse(sessionStorage.getItem('status')) || [];
    this.rTable = new RTable({
      prop: {
        // 默认静态数据，在没有提供接口的情况下，模拟接口数据展示
        value: [
          { typeName: '职称1', type: 'positionTitle', desc: '医士', value: '1', parentDict: { desc: '无' }, updateTime: '2020-04-23 21:09:36' },
          { typeName: '职称2', type: 'positionTitle', desc: '医师', value: '2', parentDict: { desc: '无' }, updateTime: '2020-04-23 21:09:37' },
          { typeName: '职称5', type: 'positionTitle', desc: '护士', value: '3', parentDict: { desc: '无' }, updateTime: '2020-04-23 21:09:38' },
          { typeName: '职称4', type: 'positionTitle', desc: '护师', value: '4', parentDict: { desc: '无' }, updateTime: '2020-04-23 21:09:39' },
          { typeName: '职称3', type: 'positionTitle', desc: '技师', value: '5', parentDict: { desc: '无' }, updateTime: '2020-04-23 21:09:40' },
        ],
        columns: [
          { type: TABLE_TYPE.index },
          { type: TABLE_TYPE.ck },
          {
            header: '系统字典项', field: 'typeName', type: TABLE_TYPE.text, isSort: true, fieldOpEvt: (e, data) => {
              // 点击事件处理，增加面包屑，传参为当前点击组件event,当前行数据
              this.rTableService.breadcrumbPath.push({
                label: data.desc,
                queryParams: {
                  level: this.rTableService.breadcrumbPath.length, // 层级
                  desc: data.typeName,
                  dictId: data.dictId,
                  useState: data.useState
                },
                // 面包屑点击处理函数
                command: (d) => {
                  const queryParams = d.item.queryParams;
                  this.rTableService.breadcrumbPath.splice(queryParams.level + 1); // 清除子节点
                  this.searchDataHandle({
                    req: {
                      bspDict: {
                        dictId: queryParams.dictId,
                        useState: queryParams.useState ? '1' : '0'
                      }
                    },
                    url: 'http://192.168.111.103:8118/bsp/rmApi/dict/bspDict/list'
                  }, R_TABLE_PAGINATOR_A);
                }
              });
              this.searchDataHandle({
                req: {
                  bspDict: {
                    dictId: data.dictId,
                    useState: data.useState ? '1' : '0'
                  }
                },
                url: 'http://192.168.111.103:8118/bsp/rmApi/dict/bspDict/list'
              }, R_TABLE_PAGINATOR_A);
            }
          },
          {
            // 动态拼接表格html片段
            header: '字典名称', field: 'desc', type: TABLE_TYPE.text, htmlString: '<span>test</span>', initEvt: (e, row) => {
              if (e.desc === '个人') {
                e[row.field + '-htmlString'] = '<i class="fa fa-plus"></i>';
              }
            }
          },
          {
            // 比较自定义值，设定自定义样式
            header: '字典值', field: 'value', type: TABLE_TYPE.text, fieldClass: { symbol: '>', value: 1, class: 'color-red' }
          },
          {
            // 字典转换，通过获取sessionStorage中的数据做字典转换
            header: '上级字典', field: 'parentDict.desc', type: TABLE_TYPE.dict, dictType: 'systemDict'
          },
          {
            // 表格开关控制
            header: '状态', field: 'useState', type: TABLE_TYPE.sw,
            fieldOpEvt: (event, rowData) => {
              // this.operateMethod({
              //   service: this.systemDictService.update,
              //   http: this.http,
              //   req: {
              //     bspDict: {
              //       dictId: rowData.dictId,
              //       useState: rowData.useState ? '1' : '0'
              //     }
              //   }
              // });
            }
          },
          {
            header: '操作', type: TABLE_TYPE.operator, width: '136px', initEvt: (e, row) => {
              // 动态控制按钮显示，如果行数据中hiddenField定义的字段为true则隐藏
              if (e.desc === 'ownCloud') {
                e.dictDelete = true;
              }
            }, operator: [
              {
                text: '查看', inlineClass: '', clickEvt: (rowData) => {
                  rowData.pageStatus = 'detail';
                  this.rTableService.message('info', rowData.desc);
                }
              },
              {
                text: '编辑', inlineClass: '', clickEvt: (rowData) => {
                  rowData.pageStatus = 'edit';
                }
              },
              {
                text: '删除', inlineClass: '', hiddenField: 'dictDelete', clickEvt: (rowData) => {
                  this.rTableService.confirm({
                    header: '删除字典',
                    msg: '是否删除该字典',
                    closable: true,
                    acceptVisible: true,
                    rejectVisible: true,
                    time: 3000
                  });
                  // this.operateMethod({
                  //   service: this.systemDictService.delete,
                  //   http: this.http,
                  //   req: {
                  //     bspDict: {
                  //       dictId: rowData.dictId
                  //     }
                  //   }
                  // });
                }
              }
            ]
          }
        ],
        paginatorPosition: 'bottom',
        scrollable: true,
        scrollHeight: '200px',
        // 配置获取数据对象，支持.
        dataConfig: {
          key: 'pageModel',
          status: 'operateSuccess',
          value: true
        }
      }
    });
    this.audioList = [{
      name: '世界这么大还是遇见你',
      type: 'mp3',
      singer: '程响',
      time: '237',
      size: '4800000',
      src: 'http://mp32.9ku.com/upload/128/2020/02/13/1002010.mp3',
      lrc: '../../../assets/music/世界这么大还是遇见你.json'
    },
    {
      name: '你的答案',
      type: 'wav',
      singer: '阿冗',
      time: '219',
      size: '3560000',
      src: 'http://mp32.9ku.com/upload/128/2019/11/08/998378.mp3',
      lrc: '../../../assets/music/你的答案.json'
    }];
  }

  ngOnInit() {
    // 初始化表格数据
    this.searchDataHandle({
      req: {
        bspDict: {}
      },
      url: 'http://192.168.111.103:8118/bsp/rmApi/dict/bspDict/list'
    }, R_TABLE_PAGINATOR_C);
  }

  /**
   * 描述：字典查询
   * 作者：oyjl
   * 时间：2021-08-09 10:26:45
   */
  public searchDict() {
    this.rTableService.breadcrumbPath = [];
    const parama = this.formModule.value;
    this.searchDataHandle({
      req: {
        bspDict: {
          typeName: parama.typeName,
          type: parama.type,
          desc: this.dictSelected && this.dictSelected.desc
        }
      },
      url: 'http://192.168.111.103:8118/bsp/rmApi/dict/bspDict/list'
    }, R_TABLE_PAGINATOR_A);
  }

  /**
   * 描述：在终端打印选中表格数据
   * 作者：oyjl
   * 时间：2021-08-09 10:25:27
   */
  public showSelectedData() {
    console.log(this.rTable.prop.selection);
  }

  /**
   * 描述：数据字典下拉框，入参为事件、是否动态获取数据
   * 作者：oyjl
   * 时间：2021-08-09 10:23:28
   */
  public dictDropdown(e, isDynamicGetData) {
    if (isDynamicGetData) {
      this.rSendRequestService.sendRequestByPost('http://192.168.111.118:8111/bsp/rmApi/dict/bspDict/list', {
        bspDict: {},
        pageModel: {
          pageNo: 1,
          pageSize: 1000000
        }
      }).subscribe((res: any) => {
        if (res.operateSuccess) {
          this.dictList = res.pageModel.rows || [];
        }
      });
    }
  }

}
// 配置获取分页参数对象
enum R_TABLE_PAGINATOR_C {
  key = '',
  pageNo = 'pageNo',
  pageSize = 'pageSize',
  total = 'totals',
  firstIndex = 1
}
